<style lang="less" scoped>
@import '@css/list.less';
</style>

<template>
  <div id="app">
    <van-sticky>
      <div class="title">一日三走访</div>
    </van-sticky>
    <van-form @submit="onsaveYb51DirectorDailyRecord" @failed="onFailed">
      <van-cell-group
        style="position: relative"
        inset
        :title="`一日三走访${index + 1}`"
        v-for="(item, index) of Yb51DirectorDailyRecord"
        :key="index"
      >
        <van-field
          class="fbox"
          v-model="item.target"
          :name="`target${index}`"
          label="走访对象"
          placeholder="支行/网点/理财"
          :rules="[{ required: true, message: '不能为空' }]"
        ></van-field>

        <van-field
          autosize
          type="textarea"
          class="fbox"
          v-model="item.content"
          :name="`content${index}`"
          label="沟通内容"
          placeholder="请填写参沟通内容"
          :rules="[{ required: true, message: '不能为空' }]"
        ></van-field>

        <van-field
          autosize
          type="textarea"
          class="fbox"
          v-model="item.feedback"
          :name="`feedback${index}`"
          label="沟通反馈"
          placeholder="请填写沟通反馈"
          :rules="[{ required: true, message: '不能为空' }]"
        ></van-field>

        <van-field
          autosize
          type="textarea"
          :name="`uploader${index}`"
          label="上传图片"
          :rules="[{ required: true, message: '请上传不超过1张照片,5M以内' }]"
        >
          <template #input>
            <van-uploader
              v-model="item.uploaderImgList"
              :max-count="1"
              :before-read="onbeforeRead"
              :after-read="onafterRead"
            ></van-uploader>
          </template>
        </van-field>

        <van-button
          v-if="index >= 1"
          size="small"
          block
          type="danger"
          @click="onDeleteYb51DirectorDailyRecord(index)"
          class="dangerDelete"
          >删除</van-button
        >
      </van-cell-group>
      <div class="button">
        <van-button
          block
          icon="plus"
          type="warning"
          style="width: 35%"
          @click="onAddYb51DirectorDailyRecord"
          >增加</van-button
        >
        <van-button block type="primary" native-type="submit" style="width: 55%">提交</van-button>
      </div>
    </van-form>
  </div>
</template>
<script setup>
import {
  onBeforeMount,
  onMounted,
  onUnmounted,
  watch,
  computed,
  provide,
  inject,
  ref,
  reactive,
  nextTick,
  h
} from 'vue'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
const dayjs = inject('$dayjs')
const showPageLoading = inject('showPageLoading')
const hidePageLoading = inject('hidePageLoading')
const showAllNonBaseMenuItem = inject('showAllNonBaseMenuItem')
const hideAllNonBaseMenuItem = inject('hideAllNonBaseMenuItem')
import { isIOS, parseTime, handleFontSize } from '@/utils'
import { yb51_directors_daily_record_saveYb51DirectorsDailyRecord } from '@/request/api.js'

onMounted(() => {
  agentcode = route.query.agentcode
  Yb51DirectorDailyRecord.value = [
    {
      agentcode: agentcode,
      target: '',
      content: '',
      feedback: ''
    },
    {
      agentcode: agentcode,
      target: '',
      content: '',
      feedback: ''
    },
    {
      agentcode: agentcode,
      target: '',
      content: '',
      feedback: ''
    }
  ]
})

let agentcode

const Yb51DirectorDailyRecord = ref()
//总监日走访记录
function onAddYb51DirectorDailyRecord() {
  if (Yb51DirectorDailyRecord.value.length == 10) {
    alert('已超过增加上限')
    return
  } else {
    Yb51DirectorDailyRecord.value.push({
      agentcode: agentcode,
      target: '',
      content: '',
      feedback: ''
    })
  }
}
//删除总监日走访记录
function onDeleteYb51DirectorDailyRecord(index) {
  Yb51DirectorDailyRecord.value.splice(index, 1)
}

import { compressImageToTargetSize } from '@/utils'
const targetSize = 1024 * 1024 * 1 // 1M大小
function onbeforeRead(file) {
  return new Promise((resolve, reject) => {
    console.log('压缩前文件大小:', file.size/(1024 * 1024), 'M')
    if (file.size < targetSize) {
      console.log('小于，不用压缩')
      resolve(file)
    } else {
      compressImageToTargetSize(file, targetSize).then((res) => {
        console.log('压缩后的文件大小:',res.size/(1024 * 1024), 'M')
        resolve(res)
      })
    }
  })
}
//文件读取后的回调函数
function onafterRead(file) {
  console.log('读取完毕')
}

//新增处总监日走访记录
function onsaveYb51DirectorDailyRecord() {
  showPageLoading()
  let formdata = new FormData()
  let Yb51DailyTutoringRacordExImg = []
  Yb51DirectorDailyRecord.value.forEach((item) => {
    formdata.append(
      'multipartFiles',
      new Blob([item.uploaderImgList[0].file], { type: 'multipart/form-data' }),
      item.uploaderImgList[0].file.name
    )
    delete item.uploaderImgList
    Yb51DailyTutoringRacordExImg.push(item)
  })
  formdata.append(
    'yb51DirectorsDailyRecordList',
    new Blob([JSON.stringify(Yb51DailyTutoringRacordExImg)], { type: 'application/json' })
  )

  yb51_directors_daily_record_saveYb51DirectorsDailyRecord(formdata).then((r) => {
    hidePageLoading()
    if (r.status == 200) {
      showDialog({
        title: '提交成功',
        message: '点击确认后返回首页'
      }).then(() => {
        window.history.go(-1)
      })
    } else {
      console.log('出错了，请重试')
      alert('出错了，请重试')
    }
  })
}
function onFailed() {
  console.log('出错了')
}
</script>
